<template>
	<view class="body">
		
		<view class="container">
			<ly-tree :tree-data="list" 
			:props="props"
			:ready="ready"
			node-key="id" 
			@node-expand="handleNodeExpand"
			:showCheckbox="true"
			:show-dot='true'
			 :defaultExpandAll='true'
			 :expandOnClickNode='false'
			@node-click="handleNodeClick">
			</ly-tree>
		</view>
		<!-- <view class="topTitle">
			<text @tap="toAdd">新增角色</text>
		</view> -->
		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<text @click="toAdd">新增</text>
				<text @click="update">修改</text>
				<text @click="delData" class="del">删除</text>
				<text class="cancel" @click="close">取消</text>
			</view>
		</uni-popup>
	</view>
	
</template>
<script>
	import { getDeptList ,delDept} from '@/api/system/system.js'
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	export default{
		components: {
			LyTree
		},
		data(){
			return{
				list:[],
				ready: false,
				pageForm:{
					pageNo:1,
					pageSize:10,
				},
				active:null,
				props: function() {
					return {
						// // 这里的label就可以使用函数进行自定义的渲染了
						// label(data, node) {
						// 		return '节点' + node.data.personName;
						// },
						 label: 'name', // 指把数据中的‘personName’当做label也就是节点名称
						children: 'children' // 指把数据中的‘childs’当做children当做子节点数据
					}
				},
			}
		},
		
		created() {
			 this.getList()
		},
		methods:{
			open(e){
				this.active=e
				console.log(e)
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close()
			},
			getList(){
				getDeptList().then(res=>{
					this.list = this.handleTree(res.data,'id');
					this.ready = true
				})
			},
			isShow(e){
				console.log(e)
			},
			toAdd(){
				this.close();
				this.$tab.navigateTo(`/pages/system/dept/addDept`)
			},
			
			//删除方法
			delData() {
				let that = this
				uni.showModal({
					title: '提示',
					content: "确认删除该职位？",
					success: function(res) {
						if (res.confirm) {
							that.delet()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			update(){
				this.$tab.navigateTo(`/pages/system/dept/addDept?id=` + this.active.id)
				this.close()
			},
			handleNodeClick(obj) {
				this.open(obj.data)
			},
			handleNodeExpand(obj) {
				
					console.log(222);
			},
			delet(){
				delDept(this.active.id).then(res=>{
					this.$modal.msgSuccess("删除成功")
					this.getList()
					this.close()
					
				})
			},
		}
	}
</script>

<style lang="scss">
	
	.container{
		background-color: #fff;
		height:100vh;
		padding-top: 10px;
		/deep/ .ly-tree-node__content{
			border-radius: 5px;
			border: 1px solid #F9EDED;
			font-size: 14px;
			font-family: Inter-Regular, Inter;
			font-weight: 400;
			color: #000000;
			padding:20px 5px;
			margin-bottom: 20rpx;
		}
		.container-1 {
			
			margin-bottom: 20upx;
		}
	}
	.topTitle{
		color: #fff;
		width: 100px;
		height: 40px;
		font-size: 14px;
		line-height: 40px;
		background: #508CFF;
		border-radius: 5px 5px 5px 5px;
		position: fixed;
		bottom: 50px;
		left: 36%;
		text-align: center;
	}
	.popup{
		height: 207px;
		background: #FFFFFF;
		text{
			line-height: 50px;
			display: block;
			text-align: center;
			font-family: Roboto-Regular, Roboto;
			font-weight: 400;
			color: #000000;
			font-size: 16px;
		}
		.cancel{
			color: #F26D6D;
		}
	}
</style>